<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>3_缩写</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="app">
      <!-- v- 是一种视觉提示，用来识别 Vue 模板中特定的 attribute。 -->
      <!-- Vue 为 v-bind 和 v-on 这两个最常用的指令提供了特定的缩写。 -->

      <!-- v-bind 完整语法 -->
      <a v-bind:href="url">...</a>
      <br />
      <!-- v-bind 缩写 -->
      <a :href="url">...</a>
      <br />
      <!-- 动态参数的缩写 (2.6.0+) -->
      <a :[key]="url">...</a>
      <br />
      <!-- v-on 完整语法 -->
      <a v-on:click="doSomething">...</a>
      <br />
      <!-- v-on 缩写 -->
      <a @click="doSomething">...</a>
      <br />
      <!-- 动态参数的缩写 (2.6.0+) -->
      <a @[event]="doSomething"> ... </a>
    </div>
  </body>
  <script type="text/javascript">
    // 阻止 vue 在启动时生成生产提示。
    Vue.config.productionTip = false;
    new Vue({
      el: "#app",
      data: {
        url: "https://vuejs.org/",
        key: "url",
        event: "click",
      },
      methods: {
        doSomething: function (event) {
          console.log("do something");
        },
      },
    });
  </script>
</html>
